<template>
    <div class="edit-password">
        <pub-top isBorder="true" title="修改支付密码"></pub-top>

        <!-- 相关设置 -->
        <div class="edit-btns flexv mt2">
            <div class="old flex">
                <span class="name">原密码</span>
                <input type="tel" class="flex1" placeholder="请输入原密码" v-model="old_pw">
            </div>
            <div class="new flex">
                <span class="name">新密码</span>
                <input type="tel" class="flex1" placeholder="请输入新密码" v-model="new_pw">
            </div>
            <div class="sure flex">
                <span class="name">确认密码</span>
                <input type="tel" class="flex1" placeholder="请确认新密码" v-model="sure_pw">
            </div>
            <div class="sub-pwd" @click="submit">确认</div>
        </div>

    </div>
</template>
<script>
import Vue from 'vue';
import { mapState } from 'vuex';
import { Toast, List } from 'vant';
import pubTop from '@/components/top';
export default {
    data(){
        return {
            old_pw: null, // 原密码
            new_pw: null, // 新密码
            sure_pw: null, // 确认密码
        }
    },
    created(){

    },
    watch: {
        old_pw(newVal, oldVal){
            if(!(/^[0-9]*$/).test(this.old_pw)){
                this.old_pw = null
            }
        },
        new_pw(newVal, oldVal){
            if(!(/^[0-9]*$/).test(this.new_pw)){
                this.new_pw = null
            }
        },
        sure_pw(newVal, oldVal){
            if(!(/^[0-9]*$/).test(this.sure_pw)){
                this.sure_pw = null
            }
        }
    },
    computed: {
        ...mapState(['user'])
    },
    components: {
        pubTop
    },
    methods: {
        submit(){
            const that = this;
            if(!this.old_pw){
                Toast({
                    duration: 1800,
                    message: '请输入原密码！'
                })
                return;
            }
            if(!this.new_pw){
                Toast({
                    duration: 1800,
                    message: '请输入新密码！'
                })
                return;
            }
            if(this.old_pw == this.new_pw){
                Toast({
                    duration: 1800,
                    message: '新密码不能与原密码相同！'
                })
                return
            }
            if(!this.sure_pw){
                Toast({
                    duration: 1800,
                    message: '请确认新密码！'
                })
                return;
            }
            if(this.new_pw != this.sure_pw){
                Toast({
                    duration: 1800,
                    message: '确认密码错误！'
                })
                return
            }
            this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=Mine&a=pwd_setting', {
                params: {
                    uid: this.$store.state.user.uid,
                    pwd: this.new_pw,
                    cpwd: this.sure_pw,
                    old_pwd: this.old_pw
                }
            }).then(res => {
                if(res.status == 200){
                    const data = res.data;
                    this.old_pw == null;
                    this.new_pw == null;
                    this.sure_pw == null;
                    Toast({
                        duration: 1800,
                        message: data.msg
                    })
                    setTimeout(function(){
                        that.$router.go(-1);
                    },2000)
                }
            })
        }
    },
}
</script>
<style lang="less" scoped>
.edit-password {
    min-height: 100vh;
    background-color: #f0f0f0;
    .edit-btns {
        .old,.new,.sure{
            width: 100%;
            height: 0.9rem;
            padding: 0 0.28rem;
            border-bottom: 1px solid #dbdbdb;
            font-size: 0.3rem;
            line-height: 0.9rem;
            color: #333;
            background-color: #fff;
            .name {
                font-weight: bold;
            }
            input {
                margin: 0 0 0 0.18rem;
                border: none;
                outline: none;
                padding: 0;
            }
        }
        .sub-pwd{
            width: 6.9rem;
            height: 0.88rem;
            margin: 1.56rem auto 0;
            border-radius: 0.1rem;
            font-size: 0.34rem;
            line-height: 0.88rem;
            text-align: center;
            color: #fff;
            background-color: #1f78ff;
        }
    }
}
</style>

